<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>外卖平台</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <div class="wrap">
      <!-- 头部 -->
      <header>
        <!-- 地址和通知栏 -->
        <ul>
          <li><img src="images/Map-Pin 2.png" alt="" /></li>
          <li>成都市高新区新希望…</li>
          <li>
            <img src="images/bell.png" alt="" />
            <p>1</p>
          </li>
        </ul>
        <!-- 搜索栏 -->
        <div class="search-wrap">
          <div class="search">
            <div class="search-icon">
              <img src="images/icon-goods6.png" alt="" />
            </div>
            <input type="text" class="search-input" placeholder="精品肥牛" />
          </div>
        </div>
      </header>
      <!-- 主体内容 -->
      <div class="content-wrap">
        <!-- 幻灯片和分类 -->
        <div class="slide-nav">
          <div class="content">
            <img src="images/bg-distribution.png" alt="" />
          </div>
          <div class="nav-classify">
            <ul>
              <li>
                <img src="images/img.png" alt="" />
                <p>锅底味型</p>
              </li>
              <li>
                <img src="images/img.png" alt="" />
                <p>锅具餐具</p>
              </li>
              <li>
                <img src="images/img.png" alt="" />
                <p>精选荤菜</p>
              </li>
              <li>
                <img src="images/img.png" alt="" />
                <p>丸滑菜品</p>
              </li>
              <li>
                <img src="images/img.png" alt="" />
                <p>精选蔬菜</p>
              </li>
            </ul>
          </div>
        </div>
        <!-- 菜品分类和菜品展示 -->
        <div class="dish-classify-display">
          <div class="dish-classify">
            <ul>
              <li>
                <p>爆品推荐</p>
                <p>精选蔬菜</p>
              </li>
              <li>
                <p>爆品推荐</p>
                <p>精选蔬菜</p>
              </li>
              <li>
                <p>爆品推荐</p>
                <p>精选蔬菜</p>
              </li>
              <li>
                <p>爆品推荐</p>
                <p>精选蔬菜</p>
              </li>
            </ul>
          </div>
          <div class="dish-display">
            <ul>
              <li>
                <img src="images/img.png" alt="" class="dish-img sell-out" />
                <p class="dish-name">广味小香肠</p>
                <p>
                  <span class="dish-price">￥29.99</span>
                  <span class="number">/份</span>
                </p>
                <img src="images/add.png" alt="" class="dish-add-icon">
              </li>
              <li>
                <img src="images/img.png" alt="" class="dish-img" />
                <p class="dish-name">广味小香肠</p>
                <p>
                  <span class="dish-price">￥29.99</span>
                  <span class="number">/份</span>
                </p>
                <img src="images/add.png" alt="" class="dish-add-icon">
              </li>
              <li>
                <img src="images/img.png" alt="" class="dish-img" />
                <p class="dish-name">广味小香肠</p>
                <p>
                  <span class="dish-price">￥29.99</span>
                  <span class="number">/份</span>
                  <img src="images/add.png" alt="" class="dish-add-icon">
                </p>
              </li>
              <li>
                <img src="images/img.png" alt="" class="dish-img" />
                <p class="dish-name">广味小香肠</p>
                <p>
                  <span class="dish-price">￥29.99</span>
                  <span class="number">/份</span>
                  <img src="images/add.png" alt="" class="dish-add-icon">
                </p>
              </li>
              <li>
                <img src="images/img.png" alt="" class="dish-img" />
                <p class="dish-name">广味小香肠</p>
                <p>
                  <span class="dish-price">￥29.99</span>
                  <span class="number">/份</span>
                  <img src="images/add.png" alt="" class="dish-add-icon">
                </p>
              </li>
              <li>
                <img src="images/img.png" alt="" class="dish-img" />
                <p class="dish-name">广味小香肠</p>
                <p>
                  <span class="dish-price">￥29.99</span>
                  <span class="number">/份</span>
                  <img src="images/add.png" alt="" class="dish-add-icon">
                </p>
              </li>
              <li>
                <img src="images/img.png" alt="" class="dish-img" />
                <p class="dish-name">广味小香肠</p>
                <p>
                  <span class="dish-price">￥29.99</span>
                  <span class="number">/份</span>
                  <img src="images/add.png" alt="" class="dish-add-icon">
                </p>
              </li>
              <li>
                <img src="images/img.png" alt="" class="dish-img" />
                <p class="dish-name">广味小香肠</p>
                <p>
                  <span class="dish-price">￥29.99</span>
                  <span class="number">/份</span>
                  <img src="images/add.png" alt="" class="dish-add-icon">
                </p>
              </li>
            </ul>
          </div>
        </div>
        <!-- 科普知识 -->
        <div class="tips-wrap">
          <div class="tip-head">
              <span>火锅科普</span>
              <span>查看全部</span>
          </div>
          <div class="tip-content">
            <ul>
              <li>
                <p class="tips-img"></p>
                <p class="tips-text">
                    <a>刷火锅的黄喉其实是猪牛……</a>
                    <span>黄喉不是“喉”</span>
                </p>
              </li>
              <li>
                <p class="tips-img"></p>
                <p class="tips-text">
                    <a>火锅锅底为什么用牛油？</a>
                    <span>牛油的三大好处</span>
                </p>
              </li>
            </ul>
          </div>
        </div>
        <!-- 尾部 -->
        <footer class="footer-wrap">
          <ul>
            <li>
              <div></div>
              <p>首页</p>
            </li>
            <li>
              <div></div>
              <p>菜单</p>
            </li>
            <li>
              <div></div>
              <p>购物车</p>
            </li>
            <li>
              <div></div>
              <p>我的</p>
            </li>
          </ul>
        </footer>
      </div>
    </div>
  </body>
</html>
